<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<h3> 成绩分布曲线</h3>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

//设置图的位置margin 和长宽
    var margin = {top: 20, right: 20, bottom: 30, left: 50};
    var width = 900 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
	
	//设置x，y轴的最大值
	
	var xLength = 11; //后边再改变
	
	var yLength = 100;
		
	//设置坐标轴
	
	//横纵轴的scale
    var xAxisScale = d3.scale.linear()
						.domain([0,xLength])
						.range([0,width]);

    var yAxisScale = d3.scale.linear()
					   .domain([0,yLength])
					   .range([height, 0]);
					   
	//应用
    var xAxis = d3.svg.axis()
        .scale(xAxisScale)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(yAxisScale)
        .orient("left");

		
	//画path时候需要的一个函数,教程里面有说明 http://www.d3js.cn/?p=68
    var line = d3.svg.line()
        .x(function(d) { return xAxisScale(d.testID); })
        .y(function(d) { return yAxisScale(d.grade); })
		//.interpolate("basis-open")
		//.interpolate("cardinal-open")
		//.interpolate("step-before")
		//.interpolate("basis")
		//.interpolate("step-after")  //画线方式，上面教程也有说
		;

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
		;
		
			//添加背景
svg.append("g")
.append("rect")
.attr("x",0)
.attr("y",0)
.attr("width",width)
.attr("height",height)
.style("fill","#FFF")
.style("stroke-width",2)
.style("stroke","#E7E7E7");


		var dataChoose=[]; //保存一条线上的数据


	//读这个文件
	d3.csv("data/grade.csv",function(data){	 
	

			for( var i=0; i<data.length; i++ ){
				
					var el = {
						testID: +data[i].testID,
						grade: +data[i].grade
					};
					dataChoose.push(el);
			
			}
			
			//设置x轴最大刻度等于作业总次数+1
			xAxisScale = d3.scale.linear()
						.domain([0,data.length+1])
						.range([0,width]);
			
				var allPath=  svg.append("path")
				  .datum(dataChoose)
				  .attr("d", line)
				  
				  //鼠标事件
				  //鼠标移到path上时候
				  .on("mouseover",function(d,i){
					d3.select(this)
					  .attr("stroke","black")
					  .attr("opacity","1")
					  .attr("stroke-width","5")
					  ;
				  }) 
				  //鼠标移走
				  .on("mouseout",function(d,i){
					d3.select(this)
					  .transition()
					  .duration(500)
					  .attr("opacity","0.5")
					  .attr("stroke","orange")
					  .attr("stroke-width", 2)
					  ; 
				  })
				  .attr("stroke", "orange")                    
				  .attr("stroke-width", 2)
				  .attr("fill", "none")
				  .attr("opacity","0.5")
				  .append("title")
				 ;

		
	});
    
					
		
			  
			  
	   svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis)
			.append("text")
			.attr("transform", "rotate(0)")
			.attr("y", 20)
			.attr("x", width-8)
			.attr("dy", ".41em")
			.style("text-anchor", "end")
			.text("作业序号");

	   svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
			.attr("transform", "rotate(0)")
			.attr("y", -15)
			.attr("dy", ".41em")
			.style("text-anchor", "end")
			.text("成绩");
	
	

	
	

    

							
</script>

















